<!--
 * @Author: Tommy Chen
 * @Date: 2024-05-22
 * @LastEditors: Tommy Chen
 * @LastEditTime: 2024-08-20
 * @FilePath: /macc.admin.vue/src/project/authSys/views/quickCreate/userSourceSelector/index.vue
 * @Description: 
-->
<template>
  <div class="selector-wrapper" style="height: 100%">
    <div>
      <a-checkbox-group
        class="source-group"
        v-model="selectedSourceIds"
        name="sourceCheckboxGroup"
      >
        <a-checkbox
          :value="source.sourceId"
          :key="index"
          v-for="(source, index) in userSources"
          v-show="ifShowItem(source)"
          :disabled="ruleType === 'dot1x'"
        >
          <span class="source-label">
            <div class="source-desc">
              {{ source.sourceName }}
              <div class="source-type" :class="source.sourceType">
                {{ getSourceTypeTxt(source.sourceType) }}
              </div>
            </div>
          </span>
        </a-checkbox>
      </a-checkbox-group>
    </div>
    <div>
      <h3>{{ $t('quickCreate.seledSource') }}</h3>
      <div
        class="source-item"
        :key="index"
        v-for="(sourceId, index) in selectedSourceIds"
      >
        <span class="source-label" v-if="userSourceMap[sourceId]">
          <div class="source-desc">
            {{ userSourceMap[sourceId].sourceName }}
            <div
              class="source-type"
              :class="userSourceMap[sourceId].sourceType"
            >
              {{ getSourceTypeTxt(userSourceMap[sourceId].sourceType) }}
            </div>
          </div>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import lodash from 'lodash';
import { mapState } from 'vuex';
export default {
  name: 'userSourceSelector',
  components: {},
  props: {
    accountSourceIds: {
      typeof: Array,
      default: () => {
        return [];
      },
    },
    ruleType: {
      typeof: String,
      default: () => {
        return '';
      },
    },
  },
  data() {
    return {
      userSources: [],
      selectedSourceIds: [],
    };
  },
  watch: {
    accountSourceIds: {
      handler(value) {
        if (value) {
          this.selectedSourceIds = lodash.cloneDeep(value);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.userSources = [
      {
        sourceId: -1,
        sourceType: 'account',
        sourceName: 'Local Account',
      },
      {
        sourceId: -2,
        sourceType: 'voucher',
        sourceName: 'Local Voucher',
      },
      {
        sourceId: -3,
        sourceType: 'mac',
        sourceName: 'Local MAC',
      },
    ];
    for (const source of this.thirdPartSources) {
      if (source.status === 1) {
        this.userSources.push({
          sourceId: source.id,
          sourceType: source.type,
          sourceName: source.name,
        });
      }
    }
  },
  computed: {
    ...mapState('AuthCommon', ['thirdPartSources']),
    userSourceMap() {
      const tempMap = {};
      for (const source of this.userSources) {
        tempMap[source.sourceId] = source;
      }
      return tempMap;
    },
  },
  methods: {
    selectAll() {
      for (const source of this.userSources) {
        if (source.sourceType === 'voucher') {
          continue;
        }
        this.selectedSourceIds.push(source.sourceId);
      }
    },
    resetSelector() {
      this.selectedSourceIds = [];
    },
    ifShowItem(source) {
      if (this.ruleType === 'dot1x') {
        if (source.sourceType === 'voucher') {
          return false;
        }
      } else if (this.ruleType === 'portal') {
        if (['mac', 'ad', 'ldap'].includes(source.sourceType)) {
          return false;
        }
      }

      return true;
    },
    getSourceTypeTxt(sourceType) {
      switch (sourceType) {
        case 'ad':
          return 'AD';
        case 'ldap':
          return 'LDAP';
        case 'mac':
          return 'MAC';
        case 'voucher':
          return 'VOUCHER';
        case 'account':
        default:
          return 'ACCOUNT';
      }
    },
    getSelectedIds() {
      if (this.selectedSourceIds.length > 0) {
        return this.selectedSourceIds;
      } else {
        this.$message.warning(this.$t('quickCreate.oneSource'));
        return false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.selector-wrapper {
  display: flex;
  gap: 16px;
  > div {
    padding: 16px;
    border: 1px solid @component-stroke;
    border-radius: 4px;
    flex: 1;
    max-width: 500px;
  }
}
/deep/.ant-form-item {
  margin-bottom: 8px;
}
.source-group {
  display: flex;
  flex-direction: column;
  gap: 16px;

  /deep/.ant-checkbox-wrapper {
    margin-left: 0;
  }
}
.source-type {
  font-size: 12px;
  height: 18px;
  line-height: 18px;
  padding: 0 8px;
  border-radius: 2px;
  &.voucher,
  &.account,
  &.mac {
    color: @theme-color;
    background: @theme-light;
    border: 1px solid @theme-focus;
  }
  &.ad {
    color: @success-color;
    background: @success-light;
    border: 1px solid @success-focus;
  }
  &.ldap {
    color: @warning-color;
    background: @warning-light;
    border: 1px solid @warning-focus;
  }
}
.source-desc {
  display: flex;
  align-items: center;
  gap: 8px;
}
.source-label {
  display: inline-block;
}
.source-item {
  margin-bottom: 16px;
}
</style>
